Feature w 20796448 figma mcps migration by sf-cboscenco · Pull Request #212 · SalesforceCommerceCloud/b2c-developer-tooling

sf-cboscenco · 2026-02-25T21:05:41Z

Summary

Figma MCP tools migration from Odyssey

Testing

Tests have been included for each MCP tool
test/tools/storefrontnext/figma/README.md | Manual test plan: unit tests, MCP Inspector, CLI testing, E2E workflow, troubleshooting

Dependencies

No net-new third-party dependencies were added
If net-new third-party dependencies were added, rationale/discussion is included and 3pl-approved is set by a maintainer

New PostCSS is needed for:
-Parsing @theme at-rules and inline blocks
-Distinguishing light/dark/shared tokens via selectors
-Handling nested rules and var() references
-and that regex-based parsing would be unreliable for real theme files.

Tests pass (pnpm test)
Code is formatted (pnpm run format)

sf-cboscenco · 2026-02-25T21:08:16Z

Figma MCP Tools Migration - Staged Changes Summary

Branch: feature-figma-mcps-migration
Generated: 2025-02-24

Overview

This document summarizes the staged changes for the Figma MCP tools migration into the b2c-dx-mcp package. The migration adds three implemented tools that replace previous placeholders: workflow orchestrator, component generation recommendation, and design token mapping.

Stats: 22 files changed, 4,327 insertions, 18 deletions

Modified Files

packages/b2c-dx-mcp/README.md

Updated tool descriptions in the STOREFRONTNEXT toolset table for the three Figma tools:
- storefront_next_figma_to_component_workflow — Workflow orchestrator for Figma-to-component conversion
- storefront_next_generate_component — Analyze Figma design and discovered components for REUSE/EXTEND/CREATE recommendation
- storefront_next_map_tokens_to_theme — Map Figma design tokens to existing theme tokens in app.css

packages/b2c-dx-mcp/package.json

Added dependency: postcss (8.5.6)

packages/b2c-dx-mcp/src/tools/storefrontnext/index.ts

Replaced three createPlaceholderTool calls with real implementations:
- createFigmaToComponentTool(loadServices)
- createGenerateComponentTool(loadServices)
- createMapTokensToThemeTool(loadServices)
Added imports for the new Figma tool factories

pnpm-lock.yaml

Updated to include postcss dependency

New Source Files

figma-to-component

File	Purpose
`figma-url-parser.ts`	Parses Figma URLs to extract fileKey and nodeId; supports design/file URL formats
`index.ts`	Workflow orchestrator tool; inlines default workflow content, parses custom workflow files, returns step-by-step instructions

generate-component

File	Purpose
`decision.ts`	Analyzes component differences (styling, structural, behavioral, props); determines REUSE/EXTEND/CREATE action and extend strategy
`formatter.ts`	Formats recommendation output for AI/developer
`index.ts`	Main tool; wraps logic with `createToolAdapter`, uses `services.getWorkingDirectory()` for workspace path

map-tokens

File	Purpose
`css-parser.ts`	Parses theme CSS (app.css) with PostCSS; extracts light/dark/shared tokens, resolves var() references
`token-matcher.ts`	Matches Figma tokens to theme tokens (exact color, fuzzy name/semantic/value)
`index.ts`	Main tool; formats mapping results, uses `services.getWorkingDirectory()` for theme file discovery

New Test Files

File	Coverage
`figma-url-parser.test.ts`	Valid/invalid URLs, design/file formats, node-id conversion
`figma-to-component/index.test.ts`	Workflow output, custom workflow files, error handling, metadata parsing
`generate-component/formatter.test.ts`	All action types (CREATE/EXTEND/REUSE), all extend strategies
`generate-component/index.test.ts`	Decision logic, difference detection, strategy selection
`map-tokens/css-parser.test.ts`	Theme parsing, token types, var() resolution, findThemeFilePath
`map-tokens/token-matcher.test.ts`	Exact/fuzzy/no-match, color/spacing/radius tokens
`map-tokens/index.test.ts`	Integration tests for full workflow

New Test Fixtures

File	Purpose
`workflow-custom.md`	Custom workflow with YAML metadata (including colon in value)
`workflow-no-metadata.md`	Workflow without YAML frontmatter

New Documentation

File	Purpose
`test/tools/storefrontnext/figma/README.md`	Manual test plan: unit tests, MCP Inspector, CLI testing, E2E workflow, troubleshooting

Tool Names (Unchanged from Placeholders)

storefront_next_figma_to_component_workflow
storefront_next_generate_component
storefront_next_map_tokens_to_theme

Quality Gates

Tests: 462 passing
Coverage: ~99% for Figma tools
Linter: No errors
Typecheck: No errors

patricksullivansf

Looks great except for a few lint errors. Please generate new documentation for each tool under docs/mcp/tools and update the docs/mcp/toolsets.md tables with links.

packages/b2c-dx-mcp/README.md

packages/b2c-dx-mcp/src/tools/storefrontnext/figma/figma-to-component/index.ts

yhsieh1 · 2026-02-26T01:44:27Z

packages/b2c-dx-mcp/src/tools/storefrontnext/figma/figma-to-component/index.ts

+### AI-Driven Component Discovery (Before calling generate-component)
+Before calling generate-component, you must discover similar components using your tools:
+
+**Discovery Strategy:**


Do we need to provide detailed discovery strategy? Will it better if we only provide the expected result and let Agentic IDE uses its build in approaches to find what we need? It should already indexed files and content and might be faster.

Can we compact and simplify the flow? Too much information might confuse agent and consume more token.

These tools were demoed by Emmy Zhang under multiple audiences, I will provide some links to the demos. I also think that we can implement improvements in subsequent updates to these tools and just focus on the migration right now as agreed so we can meet the migration timeline of 2/27.

yhsieh1 · 2026-02-26T02:02:40Z

@sf-cboscenco It looks great. Some the instruction content seems very long and complex. Is that possible to simplify them? Also it would be great to add jsdoc.

packages/b2c-dx-mcp/README.md

yhsieh1 · 2026-02-26T04:54:10Z

Could you record a demo how these tools are used and the interaction with user?

yhsieh1 · 2026-02-26T20:58:46Z

3pl review: PostCSS is widely used (Tailwind, Vite, VitePress, etc.), actively maintained, and already in your lockfile via VitePress. Version 8.5.6 is pinned, which is good for reproducibility.

sf-cboscenco · 2026-02-27T02:24:04Z

@sf-cboscenco It looks great. Some the instruction content seems very long and complex. Is that possible to simplify them? Also it would be great to add jsdoc.

Added jsdoc comments.

docs/mcp/tools/storefront-next-figma-to-component-workflow.md

sf-cboscenco · 2026-02-27T03:57:09Z

One of the demos link, courtesy of Emmy Zhang, thank you!
https://drive.google.com/file/d/1_4wqPH5n1KeN-80msMLeL1k7ci3Qhc45/view?usp=sharing

yhsieh1 · 2026-02-27T18:21:11Z

@sf-cboscenco There are some JSDoc warnings. Could you fix them so that we do not need to come back later?

…220) * MCP READMEs simplified and deduplicated with official documentation * MCP READMEs simplified incorporate PRs #212, #214

sf-cboscenco added 3 commits February 25, 2026 12:17

Figma MCP tools migration

c3be6cc

Fixed warnings

dcc6b12

Merged latest main

18a4480

sf-cboscenco requested review from clavery, patricksullivansf, wei-liu-sf and yhsieh1 as code owners February 25, 2026 21:05

github-actions bot added the needs-3pl-review PR introduces net-new third-party dependencies and needs discussion label Feb 25, 2026

patricksullivansf reviewed Feb 25, 2026

View reviewed changes

Fix linter error

649a962

yhsieh1 reviewed Feb 26, 2026

View reviewed changes

packages/b2c-dx-mcp/README.md Show resolved Hide resolved

yhsieh1 reviewed Feb 26, 2026

View reviewed changes

packages/b2c-dx-mcp/src/tools/storefrontnext/figma/figma-to-component/index.ts Outdated Show resolved Hide resolved

yhsieh1 reviewed Feb 26, 2026

View reviewed changes

packages/b2c-dx-mcp/README.md Show resolved Hide resolved

yhsieh1 added 3pl-approved Maintainer approved net-new third-party dependency additions and removed needs-3pl-review PR introduces net-new third-party dependencies and needs discussion labels Feb 26, 2026

sf-cboscenco added 6 commits February 26, 2026 17:14

Create docs as suggested in the code review

1dc964e

Added tools usage prerequisites

9fa1c1a

Added example prompts

61eaa94

Merged latest main

38eab96

Fixed directory determination

da0bf04

Improved jsdoc comments

d7d2328

yhsieh1 reviewed Feb 27, 2026

View reviewed changes

docs/mcp/tools/storefront-next-figma-to-component-workflow.md Outdated Show resolved Hide resolved

yhsieh1 reviewed Feb 27, 2026

View reviewed changes

docs/mcp/tools/storefront-next-figma-to-component-workflow.md Outdated Show resolved Hide resolved

yhsieh1 reviewed Feb 27, 2026

View reviewed changes

docs/mcp/tools/storefront-next-figma-to-component-workflow.md Show resolved Hide resolved

Merge branch 'main' into feature-W-20796448-figma-mcps-migration

80c9dad

sf-cboscenco added 2 commits February 27, 2026 09:18

Updated documsntation as requested

2d859b2

Merge branch 'main' into feature-W-20796448-figma-mcps-migration

9be0116

yhsieh1 approved these changes Feb 27, 2026

View reviewed changes

Fix jsodc warnings

cd94041

patricksullivansf approved these changes Feb 27, 2026

View reviewed changes

sf-cboscenco merged commit fb0f895 into main Feb 27, 2026
4 checks passed

sf-cboscenco deleted the feature-W-20796448-figma-mcps-migration branch February 27, 2026 20:05

patricksullivansf added a commit that referenced this pull request Feb 27, 2026

MCP READMEs simplified incorporate PRs #212, #214

a129452

patricksullivansf added a commit that referenced this pull request Feb 27, 2026

MCP READMEs simplified and deduplicated with official documentation (#…

2ca3b36

…220) * MCP READMEs simplified and deduplicated with official documentation * MCP READMEs simplified incorporate PRs #212, #214

Conversation

sf-cboscenco commented Feb 25, 2026

Summary

Testing

Dependencies

Uh oh!

sf-cboscenco commented Feb 25, 2026

Figma MCP Tools Migration - Staged Changes Summary

Overview

Modified Files

packages/b2c-dx-mcp/README.md

packages/b2c-dx-mcp/package.json

packages/b2c-dx-mcp/src/tools/storefrontnext/index.ts

pnpm-lock.yaml

New Source Files

figma-to-component

generate-component

map-tokens

New Test Files

New Test Fixtures

New Documentation

Tool Names (Unchanged from Placeholders)

Quality Gates

Uh oh!

patricksullivansf left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

yhsieh1 Feb 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sf-cboscenco Feb 27, 2026

Choose a reason for hiding this comment

Uh oh!

yhsieh1 commented Feb 26, 2026

Uh oh!

Uh oh!

yhsieh1 commented Feb 26, 2026

Uh oh!

yhsieh1 commented Feb 26, 2026

Uh oh!

sf-cboscenco commented Feb 27, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

sf-cboscenco commented Feb 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

yhsieh1 commented Feb 27, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

yhsieh1 Feb 26, 2026 •

edited

Loading

sf-cboscenco commented Feb 27, 2026 •

edited

Loading